<template>
	<div class="bg-act-box">
		<el-dialog
		  title="编辑背景"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose">
		  <div class="b-j-box">
				<span class="m-s-txt-lb">背景颜色:</span>
				<el-radio-group v-model="radio" @change="radioChange(radio,'bgColor')">
					<el-radio  label="1">默认</el-radio>
					<el-radio  label="2">自定义</el-radio>
				</el-radio-group>
				<div class="block" v-if="radio == '2'">
					<el-color-picker v-model="bgColor" size="small" @change="change"></el-color-picker>
				</div>
		  </div>
		  <div class="b-j-box">
				<span class="m-s-txt-lb">背景图片:</span>
				<el-radio-group v-model="radioBg" @change="radioChange(radio,'bgUrl')">
					<el-radio  label="1">默认</el-radio>
					<el-radio  label="2">自定义</el-radio>
				</el-radio-group>
		  </div>
		  
		  <div class="o-u-box" v-if="radioBg == '2'">
				<el-image
				      style="width: 100px; height: 100px"
				      :src="bgUrl"></el-image>
				<div class="u-btn" @click.stop="uploadPic">+上传替换</div> 
		  </div>
		</el-dialog>
	</div>
</template>

<script>
	import addPhoto from "@/components/comm/AddPhoto.vue";
	import uploadPic from "@/js/upload/UploadPic.js";
	import staticConst from "@/js/const/StaticConst.js";
	export default
	{
		data()
		{
			return{
				dialogVisible:false,
				bgColor:"#F5F5F5",
				radio: '1',
				radioBg:"1",
				bgUrl:"",
				baseUrl:"",
				initBgColor: "#F5F5F5",
			}
		},
		
		methods:
		{
			radioChange (val,key) {
				if (val == 1 && key == 'bgColor') { // 设置默认数据
					this.bgColor = this.initBgColor;
					this.change()
				} 
				if (val == 1 && key == 'bgUrl') {
					this.bgUrl = "";
					this.change()
				}
			},
			showWin(data)
			{
				this.bgColor = data.bgData.bgColor;
				this.bgUrl = data.bgData.bgUrl;
				this.dialogVisible = true;

				if (this.initBgColor != data.bgData.bgColor) {
					this.radio = "2";
				}
				
				if (this.bgUrl) {
					this.radioBg = "2";
				}
			},
			
			handleClose()
			{
				this.dialogVisible = false;
			},
			
			change()
			{
                console.log(this.bgColor)
				let obj = {};
				obj.bgColor = this.bgColor;
				obj.bgUrl = this.bgUrl;
				obj.baseUrl = this.baseUrl;
				this.$emit("editBg",obj);
			},
			
			uploadPic()
			{
				let that = this;
				uploadPic.idyun = 22;
				uploadPic.activeId = 1;
				uploadPic.type = staticConst.UPLOAD_INTER_ACTIVE;
				uploadPic.uploadSussecc = uploadSuccess;
				uploadPic.chooseImage1(callBack);
				function callBack(data)
				{
					that.bgUrl = data.url;  //显示图片
				}
				
				function uploadSuccess(data)
				{
					let obj = {};
					obj.bgColor = that.bgColor;
					obj.bgUrl = that.bgUrl = data.url;
					console.log("data.bgUrl================:",data);
					obj.baseUrl = that.baseUrl = data.name;
					that.$emit("editBg",obj);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.bg-act-box
	{
		::v-deep.el-dialog
		{
			margin-top: 40vh !important;
		}
		
		.b-j-box
		{
			height: 36px;
			display: flex;
			align-items: center;
		}
	}
	
	.m-s-txt-lb
	{
		padding-right: 10px;
	}
	.o-u-box
	{
		padding-left: 90px;
		display:flex;
		align-items: center;
		padding-top: 20px;
		.u-btn
		{
			margin-left: 10px;
			padding: 4px 20px;
			background-color: #3388FF;
			color:#FFF;
			border-radius: 4px;
			cursor: pointer;
		}
	}
	
</style>